<template>
  <div>
    <myHeader class="my-header"></myHeader>


    <div class="demo-collapse">
      <div class="page-title">
        成分介绍
      </div>


      <div>



        <div class="plate1">

          <div class="plate1-left">
            <div class="left-item" @click="current = 1">NMN</div>
            <div class="left-item" @click="current = 2">肝美靈</div>
            <div class="left-item" @click="current = 3">牛樟芝</div>
          </div>

          <div class="plate1-right">
            <div v-show="current == 1">
              <div class="plate1-title">CEO NMN 18000</div>

              <div>
                <img style="width: 100%;" src="../assets/n18.jpg" alt="">
              </div>

              <div class="plate1-right-content">
                專利NMN,啟動長壽蛋白,深度煥活細胞
                哈佛醫學院證實,NAD+隨年齡增長下降,導致衰老現象
                隨著年齡增長,特別是25歲以後,體內的NAD+濃度會逐漸降低,這導致生物體能量的「發電機」——細胞線粒體的功能衰退,從而引發衰老及各種機能衰退。哈佛醫學院等前沿科研成果證實,每日補充適量的NMN(β-煙醯胺單核苷酸)比直接補充NAD+更為有效。由於NAD+分子較大,無法被人體直接吸收利用；而通過外源補充劑補充NMN,可以有效提升人體NAD+水準,這是補充NAD+的直接且迅速的有效方法,使身體重囘「年輕狀態」。
              </div>
              <br>

              <div class="gongxiao">NMN提升NAD+ 最直接有效之方式</div>

              <!-- <div>
  <img style="width: 100%;" src="../assets/N15000.png" alt="">
</div> -->

              <div class="plate1-right-content">
                NMN提升NAD+ 最直接有效之方式
                NMN β-煙醯胺單核苷酸/β-Nicotinamide
                Mononucleotide 是NAD+最直接的前體 也是在所有生物包括人體和各種食物中天然存在的物質。只是NMN在食物中的含量微乎其微 因而單純依靠日常食物得到足夠補充。
              </div>

              <br>

              <div class="gongxiao">修復受損DNA</div>

              <div class="plate1-right-content">
                NAD+是DNA修復酶PARP的必要底物,對DNA修復、基因表達、細胞週期發展、細胞存活、染色體重建和基因穩定性等有重大影響。
              </div>


              <br>
              <div class="gongxiao">從源頭抑制衰老</div>
              <div class="plate1-right-content">
                NMN複配PQQ(吡咯喹啉醌),修復受損的線粒體,增加線粒體的數量和含量,通過增強內源性抗氧化酶的活性(如SOD),由此雙向協同增加體內NAD+水準,優化細胞抗氧化能力,從源頭延緩衰老。
              </div>
              <br>
              <div class="gongxiao">活化腦細胞</div>
              <div class="plate1-right-content">經過多項動物實驗證明,PQQ還能抑制炎症性細胞因數的釋放,改善神經功能,進而保護腦部的認知能力[2],增強腦部記憶力[3]。
              </div>
              <br>
              <div class="plate1-title">CEO NMN 15000</div>

              <div>
                <img style="width: 100%;" src="../assets/n15.jpg" alt="">
              </div>
              <br>
              <div class="gongxiao">提升肝臟的排毒功能,補腎氣色佳</div>
              <div class="plate1-right-content">人參皂苷的單體成分Rh2搭配蟲草素,能促使人參皂苷中的稀有單體Rg3含量明顯上升
                蟲草素是從冬蟲夏草中分離的一種活性成分,能雙重增強幹細胞的吞噬功能,增強肝臟的解毒和抗肝炎病毒作用,有效改善脂肪肝。
                中醫所說的“肝腎同源”,便是讓體內肝血充足,腎精自然能得到更好的補充,“肝好硬度強”,能提高機體運動能力,快速從疲勞中恢復體力。
                女性使用可增強細胞的活力和生命力,幫助肌膚排出毒素和廢物使肌膚更緊致富有彈性,同時抑制酪氨酸酶的活性,安全有效地提亮膚色。
              </div>
              <br>

              <div class="gongxiao">適用人群</div>
              <div class="plate1-right-content"> 有養顏抗衰需求人士 NMN作為一種抗氧化劑,可以抵抗自由基對皮膚的損害,延緩皮膚衰老；
                關注腦部健康及腦力工作人士：保護腦細胞,緩解精神壓力,提高認知能力並增強注意力和記憶力；
                工作壓力大,需改善體力人士：提升能量水準和反應速度；
                關注三高人士：如糖尿病、高血糖、高血壓、高血脂等慢性疾病；
                熬夜者：增強細胞能量產生,加快機體恢復,改善代謝；
                飲酒者：提高解酒能力,保護肝臟,修復因乙醛毒性損傷的肝細胞；
                失眠者：調節生物時鐘,改善睡眠品質,對晝夜顛倒或年齡增長引起的睡眠障礙都有幫助。</div>

                <br>
              <div class="gongxiao">服用建議</div>
              <div class="plate1-right-content"> *成人,每日1次,每日1-2粒。建議早上空腹服用或早餐1h後服用。連續服用3個月,以達至產品最佳保健效果
                *所有成分均經過科學研究及臨床機構的支持,確保安全、有效。</div>


            </div>

            <div v-show="current == 2">

              <div class="plate1-title">肝美靈</div>

              <div>
                <img style="width: 100%;" src="../assets/gml.jpg" alt="">
              </div>
              <br>
              <div class="gongxiao">護肝鐵三角,全面保護肝活力</div>
              <div class="plate1-right-content">淨化解毒：促進酒精分解,減少肝臟脂肪積存,防止宿醉頭疼
                修復受損 促進啟動Nrf2/HO-1信號通路,提升肝臟抗氧化及抗氧能力,快速修復受損DNA
                全面強化：強化肝臟機能,更新肝臟組織,減輕肝臟原纖維增生程度,對化學性肝損傷有一定的輔助保護作用
              </div>
              <br>
              <div class="gongxiao">大功效,呵護小心肝</div>
              <div class="plate1-right-content">疏肝淨化：加強肝臟細胞修補和更新,迅速強化肝臟,減少肝脂肪積聚。
                清肝利膽：改善肝功能,分泌膽汁,助消化、滋潤胃膽及脾臟,預防煙酒過多引起的酒精性肝病。
                促修復抗損傷：保護肝臟,抵抗酒精及人體無法分解的毒素,抗肝臟脂肪變性,改善肝臟病理損害。
                護肝再生：強化及修復肝臟,加強體內蛋白質合成,促進肝細胞新生。
                消炎鎮痛：保護肝細胞膜,並有抗輻射作用,減少其他自由基的傷害,抗發炎減輕痛楚。</div>
                <br>
              <div class="gongxiao">主要成分</div>
              <div>
                <img style="width: 100%;" src="../assets/gml2.jpg" alt="">
              </div>
              <div class="plate1-right-content">葛根枳椇子複合物、胱氨酸、酵母提取物、還原型薑黃素 BCM-95® 、乙醛脫氫酶、乙醇脫氫酶 、NAD 煙醯胺腺嘌呤二核苷酸
                、維生素B2、天然牛磺酸
              </div>

              <!-- <div class="gongxiao">由內呵護,為肝減負煥生機</div>
              <div class="plate1-right-content">
                1.喝酒不宿醉：解酒醒酒,加速酒精代謝,應酬好幫手。
                2.疏肝排毒：夜夜笙歌不爆肝。
                3.促修復抗損傷：增加肝動力。
                4.消炎鎮痛：改善腸胃不適。
              </div> -->

              <br>
              <div class="gongxiao">由內呵護,為肝減負煥生機</div>
              <div class="plate1-right-content">
                1.喝酒不宿醉：解酒醒酒,加速酒精代謝,應酬好幫手。<br>
                2.疏肝排毒：夜夜笙歌不爆肝。<br>
                3.促修復抗損傷：增加肝動力。<br>
                4.消炎鎮痛：改善腸胃不適。
              </div>

              <br>
              <div class="gongxiao">適用人群：</div>
              <div class="plate1-right-content">
                長期應酬者：聚餐派對酒局,容易宿醉。
                長期熬夜者：常常加班熬夜,開黑追劇,失眠難入睡,皮膚狀態差。
                飲食油膩者：喜歡油膩飲食,管不住嘴,邁不開腿。
                吸煙者：明知傷身,耐不住煙癮大。
                需要養肝護肝者：有肝臟問題,需要日常調理。
                情緒起伏者：工作或生活壓力大,易怒。

              </div>

              <br>
              <div class="gongxiao">服用方法</div>
              <div class="plate1-right-content">
                成人。餐後溫水送服,每日1-2次,每次2粒。社交應酬人士請於飲酒前半小時服用2粒,效果更佳。
              </div>


            </div>

            <div v-show="current == 3">
              <div class="plate1-title">牛樟芝</div>


              <div>
                <img style="width: 100%;" src="../assets/niulz.png" alt="">
              </div>
              <br>
              <div class="plate1-right-content">
                牛樟芝被譽為「神明菇」,僅生長在臺灣中海拔山區,是臺灣獨有的藥用真菌,臺灣原住民族歷代生活在山林中,偶爾找到一種金紅色菇菌,其生長在陰暗潮濕樹心的枯倒木中,食用此菇菌或飲用其熬煮的湯液後,竟能補充體能、減輕病痛,一些喜愛喝酒的原住民食用後,酒後症狀也減輕許多,故發現「神明菇」能解百毒和宿醉的奇效,慢慢成為原住民家家戶戶必備的祖傳秘方,這就是為後世所認知的牛樟芝。
                牛樟芝的特點在於其金紅色的外形,其生長在臺灣特有的牛樟樹內部且具有宿主專一性,因特殊的寄生關係得其名,當地視其為一種神聖的存在,在民間一直有「森林紅寶石」之稱。牛樟芝擁有提升免疫力、調整體質的功效,超過400篇SCI國際性期刊科研顯示牛樟芝含有豐富的生物活性成分,包括三萜類、多醣體、腺苷、超氧化物歧化酶(SOD)等,這些成分對人體健康具有積極的影響。在傳統醫學中,牛樟芝被視為滋補良藥,用於調理身體機能、增強體力。
              </div>

              <br>
              <div class="gongxiao">牛樟芝納米滴丸</div>
              <div class="plate1-right-content">
                在納米技術上取得重大突破,嚴選臺灣野生牛樟芝,利用生物科技專利超臨界技術進行萃取,有效成分遠超市面上的同類型產品,經過特殊濃縮制程處理後,其活性成分超過200多種,能有效養護肝臟、解除宿醉、維持心血管健康、強化免疫系統、延緩衰老。
              </div>
              <br>

              <div class="gongxiao">高效吸收·長效維持·高利用率</div>
              <div class="plate1-right-content">
                滴丸具有速效、生物利用度高、不破壞、高純度、高濃縮、長效等優勢,滴丸路徑是經由舌下黏膜直接作用,優點在於其有效成分可藉由黏膜直接滲透到微血管,最大程度保留有效成分,完整吸收,同時也加速了將成分帶到身體各處的時間。
              </div>

              <br>
              <div class="gongxiao">護肝解酒,肝臟防護</div>
              <div class="plate1-right-content">
                牛樟芝對肝損傷的保護作用,能有效降低酒精性肝臟損傷,抑制肝纖維化,減少化學性肝損傷及急性肝損傷,從而達到防護肝臟,快速解酒等功能。
              </div>

              <br>
              <div class="gongxiao">降三高,保護心血管</div>
              <div class="plate1-right-content">
                牛樟芝能調控內皮細胞一氧化碳 NO 的釋放,牛樟芝中三萜類化合物能有效降低血漿當中三酸甘油脂和血糖濃度,達到降血脂、降血糖效果。
              </div>
              <br>

              <div class="gongxiao">抗氧化,延緩衰老</div>
              <div class="plate1-right-content">
                自由基會破壞身體健康細胞,如果身體有過多的自由基,會讓身體加速老化,因此「抗氧化」尤為重要。牛樟芝中的多醣和酚類化合物,具有強大的抗氧化作用,能夠清除體內的自由基,抑制過氧化反應,減少氧化損傷對細胞的影響。
              </div>
              <br>
              <div class="gongxiao">增強免疫調節,降低細胞病變風險,降低癌症</div>
              <div class="plate1-right-content">
                多項研究表明,三萜類化合物可抑制細胞變異,與多醣體相互作用能有效抗腫瘤。同時,多醣體能活化T細胞、B細胞、巨噬細胞、NK細胞等免疫細胞,大幅增強人體自身的免疫系統,大量文獻證實有助緩解腫瘤癌症患者放療、化療所產生的不良反應,降低腫瘤患者復發、擴散等風險。
              </div>


              <div class="gongxiao">主要功效</div>
              <div class="plate1-right-content">
                1.養護肝臟,解酒解宿醉<br>
                2.排解毒素,增強肝臟機能<br>
                3.對抗三高,保護心血管<br>
                4.滋補養身,固本培元<br>
                5.增強免疫,調整體質<br>
                6.抑制癌細胞增殖
              </div>
              <br>


              <div class="gongxiao">適用人群</div>
              <div class="plate1-right-content">
                1.經常加班、喝酒應酬,生活作息不正常人士。<br>
                2.飲食不規律,無法攝取均衡營養人士。<br>
                3.關注生理機能,維持健康人士。<br>
                4.年紀漸增,擔心身體防禦下降人士。<br>
                5.經常熬夜、容易疲憊、精神不濟人士。<br>
                6.煙酒過量、肝功能受損人士。<br>
                7.體弱多病或大病初癒人士。<br>
                8.患有三高及心臟病人士。
              </div>
              <br>

              <div class="gongxiao">服用方法</div>
              <div class="plate1-right-content">
                養生保健 每日1次,每次5-10粒。
                特別調養 每日2次,每次5-10粒,早、晚各1次。
                *餐前餐後均可含服,舌下黏膜直接吸收,成分完整不破壞。
              </div>

            </div>



          </div>
        </div>



      </div>
    </div>

    <myFooter class="footer"></myFooter>
  </div>

</template>


<script>
import myFooter from '../components/myFooter.vue';
import myHeader from '../components/myHeader.vue';


export default {
  name: 'HomePage',
  components: {
    myFooter,
    myHeader
  },
  data() {
    return {
      activeNames: '',
      current: 1,
    }
  },
  async mounted() {
    let params = {
      searchStr: '',
      category: null,
      pageSize: this.pageSize,
      pageIndex: this.pageIndex
    }
    this.getData(params);

  },
  methods: {
    backTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    },

    async getData(params) {
      try {
        let res = await this.$api.productList(params);
        this.list = res.data.data;
        this.totalNum = res.data.totalNum;
        console.log(this.list)
      } catch (err) {
        console.log(err)
      }
    },


    currentChange(index) {
      // console.log(e);
      this.currentCls = index;

      let params = {
        searchStr: '',
        category: this.currentCls,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex
      }
      this.getData(params);

    },

    pageChange(e) {
      console.log(e);
      let params = {
        searchStr: '',
        category: null,
        pageSize: this.pageSize,
        pageIndex: e
      }
      this.getData(params);
    }
  }
}
</script>



<style lang="less" scoped>
.demo-collapse {
  margin: 105px 0 0px 0;
  padding: 0 20vw;
}

.page-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 100px;
  height: 100px;
  text-align: center;
}

.footer {
  width: 100%;
}

.left-item {
  width: 200px;
  background-color: rgb(139, 150, 155);
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  margin-bottom: 10px;
}


.plate1 {
  padding-top: 60px;
  display: flex;
  justify-content: space-between;
  line-height: 24px;

  .plate1-left {
    width: 28%;

    .gongxiao {
      font-size: 20px;
      font-weight: 700;
    }

    .plate1-title {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .plate1-left-content {
      font-size: 13px;
    }
  }



  .plate1-right {
    width: 68%;

    .gongxiao {
      font-size: 20px;
      font-weight: 700;
    }

    .plate1-title {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .plate1-right-content {
      font-size: 18px;
      line-height: 32px;
    }

    .plate1-right-mid {
      display: flex;
      justify-content: space-around;
      font-size: 16px;


      .plate1-right-mid-cell {
        text-align: center;

        .iconfont {
          font-size: 36px;
          font-weight: 500;
          margin-bottom: 10px;
        }
      }


    }

    .plate1-right-foot {
      .p-list {
        display: flex;

        .p-item {
          text-align: center;

          .p-item-img {
            width: 200px;
          }
        }
      }
    }

  }


  .plate1-right1 {
    width: 48%;
  }
}

@media (min-width: 1200px) {
  .plate1 {
    width: 1170px;
    margin: 0 auto;
  }
}




@media (max-width: 768px) {
  .page-title {
    font-size: 36px !important;
    text-align: center;
  }

  .demo-collapse {
    padding: 2vw !important;
  }


}



@media (max-width: 768px) {
  .banner {
    width: 100vw;
  }

  .plate1 {
    display: block;
    padding-top: 30px;

    .plate1-left {
      // display: none;
      width: 100px;
      position: fixed;
      bottom: 10px;
      right: 10px;

      .left-item {
        width: 100px;
        background-color: rgb(139, 150, 155);
        font-weight: 700;
        font-size: 16px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border-radius: 20px;
        margin-bottom: 5px;
      }


    }

    .plate1-right {
      width: 100%;
      padding: 10px 5% 0 5%;



      .plate1-right-foot {
        .p-list {
          display: flex;

          .p-item {
            text-align: center;

            .p-item-img {
              width: 100px !important;
            }
          }
        }
      }
    }
  }

  .video-box {
    padding: 5px 0vw 0 0vw;

    .publicity-video {
      width: 100%;
    }
  }


  .honor {
    .honoe-title {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      padding: 20px 0;
    }

    .honor-box {
      margin: 10px 0;
      display: flex;
      padding: 0 10vw;
      justify-content: space-around;
      flex-wrap: wrap;

      .cer-img {
        width: 90px;
        height: auto;
      }
    }

  }


  .p-list {
    padding: 0;
    flex-wrap: wrap;
  }

  .p-item-img {
    width: 90vw !important;
    height: auto !important;
  }

  .footer {
    height: 138px;
  }
}
</style>